---
title: Fetcher
excerpt: Using a custom fetcher with NextDrupal.
---

<!--
************************************************************
*  TODO: Remove this block before publishing.

*  Comment: In order to support a custom fetcher and handle caching withouth the native polyfilled fetch, 'unstable_cache' from next should be used, but also the NextDrupal client should support passing revalidate options.
************************************************************
-->

The `NextDrupal` uses the polyfilled `fetch` from Next.js as the default fetcher.

You can provide your own using the [`fetcher`](/docs/configuration#fetcher) option.

---

## Example

Here's how you can replace the default fetcher with [cross-fetch](https://github.com/lquixada/cross-fetch).

<Callout>

We're using **cross-fetch** instead of **node-fetch** because it is compatible with the built-in fetch and uses the same signature.

</Callout>

```ts title=lib/drupal.ts
import { NextDrupal } from "next-drupal"
import crossFetch from "cross-fetch"

// Create a custom fetcher.
const customFetcher = (url, options) => {
  const { withAuth, ...opts } = options

  if (withAuth) {
    // Make additional requests to fetch a bearer token
    // Or any other Authorization headers.
  }

  return crossFetch(url, {
    ...opts,
    // Pass in additional options. Example: agent.
  })
}

// Pass the custom fetcher to the client.
export const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  fetcher: customFetcher,
})
```
